在過去 Javascript還沒發展 common.js 或是 ESM，在使用 Javascript 時，因為使用 <script></script> 常常會造成命名會造成 var 全域污染的問題，後來發展出 IIFE，並在執行完就消失，確保在 function 內的變數不會污染其他的變數。並把這些 IIFE 的 function 串成一個共用 function 隨時取用共用 function 裡的 IIFE，這是模組化的開始。

//初始 Javascript 的情境
<script>
var count = 0;
function addCount()=>{
	count++
}
addCount();
</script>
<script>
function reduceCount()=>{
	count--
}
reduceCount();
</script>

// 這邊 count 會變成 window.count
// reduceCount 還是會操作到 window.count 的 value

//IIFE

void function (){
	window.caculateCount = window.caculateCount || {};
	window.caculateCount.addCount = addCount;
	window.caculateCount.reduceCount = reduceCount;

	function addCount(){
	count++;
	}

	function reduceCount(){
	count--;
	}
}();

而在 CommonJS 和 ES6 Modules 出現後，現在可以用 exports, require 或是 import export 的方式去做模組化的控管。並且在

CommonJS - 此為動態載入

// addCount.js
function addCount (count) {
  count++;
}
module.exports = addCount

// index.js
const addCount = require('./add');

let currentCount = 0;

addCount(currentCount);

ES6 Modules - 此為靜態載入

// addCount.js
export function addCount (count) {
  count++;
}

//index.js
import {addCount} from './addCount.js'

let currentCount = 0;

addCount(currentCount);

https://blog.risingstack.com/node-js-at-scale-module-system-commonjs-require/

https://www.zybuluo.com/JunQiu/note/1223928